<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>卓越--联系我们</title>
<link rel="shortcut icon" href="images/favicon.ico" type="image/x-icon"/>
<link href="JsCss/common.css" rel="stylesheet" media="screen" type="text/css" />
<script type="text/javascript" src="JsCss/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="JsCss/vue.min.js"></script>
<script type="text/javascript" src="JsCss/axios.min.js" charset="utf-8"></script>
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=0DBTh1xpZIXyV9u1CzpbyFsh"></script>
<script type="text/javascript" src="JsCss/marker.js" ></script>
<script src="JsCss/index.js"></script>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title>卓越地图</title>  
<style type="text/css">  
	#container{
		width:	600px;
		height: 250px;
		border: solid 1px #AAA;
	}  
	table{
		border-collapse:separate; 
		border-spacing:10px;
	}
	tr{
		width: 80px;
	}
	
</style>
</head>

<body>
    <div class="header">
         <ul class="top-link">
            <li class="title"><a target=_top href="register.html">注册</a></li>
            <li class="pi"></li>
            <li class="title"><a href="login.html?">登录</a></li>
        </ul>
        
        <div class="logo"><a href="index.html"><img src="images/logo.png" width="250" height="82" /></a></div>
        <div class="menu">
            <ul>
                <li><a href="about.html">关于我们</a><span>about us</span></li>
                <li ><a href="auctioning.html">拍卖信息</a><span>Auction information</span></li>
                <li ><a href="product.html">商品展示</a><span>Product showcase</span></li>
                <li class="active"><a href="showData.html">个人信息</a><span>Personal information</span></li>
                <li ><a href="chargeMoney.html">资金管理</a><span>Money management</span></li>
                
            </ul>
        </div>
    </div>
    <!-- 菜单和下面模块的间隔-->
    <div class="clr50"></div>
	<!-- 图片 -->
    <div class="zy_banner_bg">
    	<div class="zy_banner"></div>
    </div>
    
    
    
    <div class="zy_main" id="about">
    	<div class="Left_subMenu">
        	<div class="top_bg"></div>
            <div class="c_bg">
            	<div class="title">个人信息</div>
                <ul>
					<li><a href="showData.html">查看个人信息</a></li>
					<li class="activer"><a href="register.html">注册</a></li>
					<li><a href="login.html">登录</a></li>
					<li><a href="updatePwd.html">修改密码</a></li>
                    
                </ul>
            </div>
            <div class="bottom_bg"></div>
            
            <div class="ph">
            	<img src="images/ph.png" width="169" height="67" />
            </div>
        </div>
        
      
      
        
      <div id="process" class="zy_right">
      		<div class="position">当前位置：<a href="#">个人信息</a> > <a href="#">注册</a></div>
      		<div class="zy_title">
      			<p>注册<span> Register </span></p>
      		</div>
      		<div class="cz-con-text">
      			<form action="" method="" class="cz-form">
      				<table cellspacing="" cellpadding="" >
      					<tr>
      						<td><span style="color: red;">*</span>会员账号： </td>
      						<td><input type="text" class="cz-birds" id="hid"
      								placeholder="请输入会员编号..."
									v-model="huiyuan.hid"
									@blur="validHid()"/>
      								<span id="msg">
      									
      								</span>
      						</td>
      					</tr>
      					<tr>
      						<td><span style="color: red;">*</span>会员密码： </td>
      						<td><input type="password" class="cz-birds"
      								placeholder="请输入会员密码..." 
									v-model="huiyuan.hpwd"/></td>
      					</tr>
						<tr>
							<td><span style="color: red;">*</span>确认密码： </td>
							<td><input type="password" class="cz-birds"
									placeholder="请再次输入密码..."
									v-model="secpwd"/>
									<span id="pwdMsg">
										
									</span></td>
						</tr>
      					<tr>
      						<td><span style="color: red;">*</span>会员昵称： </td>
      						<td><input type="text" class="cz-birds"
      								placeholder="请输入会员昵称..."
									 v-model="huiyuan.hname"/></td>
      					</tr>
      					<tr>
      						<td><span style="color: red;">*</span>联系电话： </td>
      						<td><input type="text" class="cz-birds"
      								placeholder="请输入联系电话..." 
									v-model="huiyuan.htel"/><span id="telMsg">
										
									</span></td>
      					</tr>
      					<tr>
      						<td>会员地址： </td>
      						<td><input type="text" class="cz-birds"
      								placeholder="请输入会员地址..." 
									v-model="huiyuan.haddress"/></td>
      					</tr>
      					<tr>
      						<td>会员邮箱： </td>
      						<td><input type="text" class="cz-birds"
      								placeholder="请输入会员邮箱..." 
									v-model="huiyuan.hemail"/></td>
      					</tr>
      					<tr>
      						<td>会员备注： </td>
      						<td><input type="text" class="cz-birds"
      								placeholder="请输入会员备注..." 
									v-model="huiyuan.hbackup"/></td>
      					</tr>
      					<tr>
      						<td colspan="2" style="text-align: center;">
      							<div class="cz-sub">
      								<input type="button" class="cz-gkbutton" @click="register()" />
      							</div>
      					</tr>
      				</table>
      			</form>
      		</div>
      	</div>
      
      </div>
    
<div id="footer-top">
        <div class="footer-text">
            © 小佟拍卖行  
        </div>
    </div>
<script>
	var vm = new Vue({
		el:'#about',
		data:{	
			huiyuan:{
				hid:'',
				hpwd:'',
				hname:'',
				htel:'',
				haddress:'',
				hemail:'',
				hbackup:''
			},
			secpwd:'',
			//flag:true  //设置为表单校验的结果
		},
		methods:{
			 validHid(){
				var hid = this.huiyuan.hid;
				if(hid.length==0){
					$("#msg").css("color","red").html("请输入账号");
				}
				
				axios.get("/huiyuan/validHid?hid="+hid)
				.then(res=>{
					if(res.data.code == 200){
						$("#msg").css("color","green").html("该账户名可用");
					}else{
						$("#msg").css("color","red").html("该账户名重复，重新输入");
					}
				})
				
			},
			async register() {
				//标志成功或失败
				var flag = true;
				
				//检测账号是否可用
				var resp  =  await axios.get("/huiyuan/validHid?hid="+this.huiyuan.hid);    // 应该使用同步请求校验重复性。。。。。。？？？？？？？
				
				alert(resp.data.code);
				
				if(resp.data.code == 500){
					flag = false;
				}
				//window.location.href="login.html"
				//1, 先做表单校验
				/* if(this.huiyuan.hid.length == 0){
					 $("#msg").html("请输入账号");
					 this.flag = false;
				}
				else{
					 $("#msg").html("");
				} */
				
				//校验密码不为空
				
				//校验确认密码不为空
				
				// 校验密码和确认密码必须一致
				alert("1")
				if(this.huiyuan.hpwd != "" && this.secpwd != "") {
				   if(this.huiyuan.hpwd != this.secpwd){
						$("#pwdMsg").html("两次输入密码不一致");
						flag = false;
					}else{
						$("#pwdMsg").html("");
					}
				}
				alert("2")
				//2.1 校验成功，做注册请求
				if(flag == true){
					axios.post("/huiyuan/register",this.huiyuan)
					.then((resp)=>{
						console.log(resp.data);
						if(resp.data.code == 200){
							location.href = "login.html";
						}else{
							alert("注册失败，重新注册");
						}
					})
					
				}
				alert("3")
				//2.2 校验失败，停留在当前页面
				
				
				
			},
		}
	});                     
</script>    
 
</body>
</html>
